/* ============================================
   ESTILOS DE TIPOGRAFÍA Y TEXTO
   Psicología de la Religión
   Extraídos del index.html (página de inicio)
   ============================================ */

/* -----------------------------------------------
   1. FUENTES IMPORTADAS (Google Fonts)
   ----------------------------------------------- */
/* 
   Fuentes cargadas desde Google Fonts:
   - Lato: 300, 400, 400i, 700, 900
   - Roboto: 100-900 (con itálicas)
   - Roboto Slab: 100-900 (con itálicas)
   - Source Sans Pro: 400, 400i, 700, 700i
   - Zen Old Mincho: 100-900 (con itálicas)
   
   Para importar en un proyecto limpio:
*/
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,900|Roboto:100,200,300,400,500,600,700,800,900|Roboto+Slab:100,200,300,400,500,600,700,800,900|Source+Sans+Pro:400,400i,700,700i|Zen+Old+Mincho:400,500,600,700&subset=latin,latin-ext&display=swap');

/* -----------------------------------------------
   2. TIPOGRAFÍA BASE (Tema Newsment)
   ----------------------------------------------- */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .main-navigation a,
body .font-family-1,
body .site-description,
body .trending-posts-line,
body .widget-title,
body .em-widget-subtitle,
body .grid-item-metadata .item-metadata,
body .af-navcontrols .slide-count,
body .figure-categories .cat-links,
body .nav-links a {
  font-family: 'Roboto', sans-serif;
}

/* -----------------------------------------------
   3. VARIABLES TIPOGRÁFICAS GLOBALES (Elementor)
   ----------------------------------------------- */
/*
   --e-global-typography-primary-font-family: "Roboto"
   --e-global-typography-primary-font-weight: 600
   
   --e-global-typography-secondary-font-family: "Roboto Slab"
   --e-global-typography-secondary-font-weight: 400
   
   --e-global-typography-text-font-family: "Roboto"
   --e-global-typography-text-font-weight: 400
   
   --e-global-typography-accent-font-family: "Roboto"
   --e-global-typography-accent-font-weight: 500
*/

/* -----------------------------------------------
   4. TÍTULO PRINCIPAL (H1)
   "Explora el Mundo de la Psicología de la Religión"
   Selector genérico: primer heading después del header
   ----------------------------------------------- */
.elementor-top-section + .elementor-top-section .elementor-widget-heading {
  text-align: center !important;
}

.elementor-top-section + .elementor-top-section .elementor-heading-title.elementor-size-default {
  font-family: "Zen Old Mincho", sans-serif !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  color: #040404 !important;
}

/* Heading genérico Elementor */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--e-global-typography-primary-font-family, "Roboto"), sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight, 600);
  color: var(--e-global-color-primary, #3DBD51);
}

/* Tamaños de heading Elementor */
.elementor-widget-heading .elementor-heading-title.elementor-size-small {
  font-size: 15px;
}

.elementor-widget-heading .elementor-heading-title.elementor-size-medium {
  font-size: 19px;
}

.elementor-widget-heading .elementor-heading-title.elementor-size-large {
  font-size: 29px;
}

.elementor-widget-heading .elementor-heading-title.elementor-size-xl {
  font-size: 39px;
}

.elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
  font-size: 59px;
}

/* -----------------------------------------------
   5. TEXTO DEL CUERPO / CONTENIDO PRINCIPAL
   Párrafos de bienvenida del index.html
   ----------------------------------------------- */
.elementor-widget-text-editor {
  font-family: var(--e-global-typography-text-font-family, "Roboto"), sans-serif;
  font-weight: var(--e-global-typography-text-font-weight, 400);
  color: var(--e-global-color-text, #7A7A7A);
}

/* Texto específico del contenido principal - genérico */
.elementor-widget-text-editor .elementor-widget-container {
  font-family: "Roboto", sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #000000 !important;
}

/* -----------------------------------------------
   6. SECCIÓN INFERIOR CON FONDO DEGRADADO
   "Centro de Estudios en Psicología de la Religión"
   Selectores genéricos con !important
   ----------------------------------------------- */

/* Título de la sección inferior - genérico */
.elementor-section .elementor-widget-heading .elementor-heading-title {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

/* Subtítulo / texto secundario - genérico */
.elementor-section .elementor-widget-heading .elementor-heading-title[style*="color"] {
  font-family: "Roboto", sans-serif;
}

/* -----------------------------------------------
   7. ICONOS SOCIALES (Sección inferior) - genérico
   ----------------------------------------------- */
.elementor-widget-social-icons .elementor-widget-container {
  text-align: center !important;
}

/* -----------------------------------------------
   8. COLORES DE ENLACES Y HOVER
   ----------------------------------------------- */
body a:hover,
body a:focus,
body a:active,
body .figure-categories-2 .cat-links a {
  color: #12A86B;
}

/* Títulos de artículos hover */
.entry-title a:visited:hover,
.entry-title a:hover,
h3.article-title.article-title-1 a:visited:hover,
h3.article-title.article-title-1 a:hover,
.trending-posts-carousel h3.article-title a:visited:hover,
.trending-posts-carousel h3.article-title a:hover,
.exclusive-slides a:visited:hover,
.exclusive-slides a:hover,
.article-title.article-title-1 a:visited:hover,
.article-title.article-title-1 a:hover,
.article-title a:visited:hover,
.article-title a:hover {
  color: #12A86B;
}

/* -----------------------------------------------
   9. CATEGORÍAS (Badges de color)
   ----------------------------------------------- */
.figure-categories .cat-links a.covernews-categories {
  background-color: #90AFC5;
  color: #9cbed7;
  padding: 3px 6px;
  border-radius: 0px;
  font-weight: bold;
}

/* Newsment: categoría principal */
body .figure-categories .cat-links a.covernews-categories {
  background-color: #12A86B;
  color: #ffffff;
}

/* Categoría color 2 (naranja) */
body .figure-categories .cat-links a.category-color-2 {
  background-color: #FF8C02;
  color: #ffffff;
}

/* Categoría color 3 (rojo) */
body .figure-categories .cat-links a.category-color-3 {
  background-color: #ED2938;
  color: #ffffff;
}

/* -----------------------------------------------
   10. BOTONES Y ELEMENTOS SECUNDARIOS
   ----------------------------------------------- */
body .secondary-color,
body button:not(.quadmenu-navbar-toggle),
body input[type="button"],
body input[type="reset"],
body input[type="submit"] {
  background: #90AFC5 !important;
  color: white !important;
  user-select: none;
}

/* Restaurar el botón hamburguesa del QuadMenu */
.quadmenu-navbar-toggle {
  background: transparent !important;
}

/* Newsment: color secundario */
body .secondary-color,
body button,
body input[type="button"],
body input[type="reset"],
body input[type="submit"],
body .site-content .search-form .search-submit,
body .site-footer .search-form .search-submit,
body .em-post-format i,
body span.header-after:after,
body #secondary .widget-title span:after,
body .af-tabs.nav-tabs > li > a.active:after,
body .af-tabs.nav-tabs > li > a:hover:after,
body .exclusive-posts .exclusive-now,
body span.trending-no,
body .tagcloud a:hover,
body .em-reated-posts .related-title::before,
body .widget_block .wp-block-search__label::before,
body .widget_block .wp-block-group__inner-container h1::before,
body .widget_block .wp-block-group__inner-container h2::before,
body .widget_block .wp-block-group__inner-container h3::before,
body .widget_block .wp-block-group__inner-container h4::before,
body .widget_block .wp-block-group__inner-container h5::before,
body .widget_block .wp-block-group__inner-container h6::before {
  background: #12A86B;
}

/* -----------------------------------------------
   11. IMÁGENES
   ----------------------------------------------- */
img {
  height: auto;
  max-width: 100%;
  border-radius: 0px;
}

.elementor img {
  height: auto;
  max-width: 70%;
  border-radius: 10%;
}

/* -----------------------------------------------
   12. ACCORDION (Elementor)
   ----------------------------------------------- */
.elementor-widget-accordion .elementor-active .elementor-accordion-icon,
.elementor-widget-accordion .elementor-active .elementor-accordion-title {
  color: #1badb7;
}

.elementor-widget-accordion .elementor-accordion-icon,
.elementor-widget-accordion .elementor-accordion-title {
  color: #426e86;
}

/* -----------------------------------------------
   13. CONTENEDORES ELEMENTOR (Anchos máximos)
   Con !important para predominar
   ----------------------------------------------- */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 630px !important;
}

@media (min-width: 768px) {
  .elementor-default .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 730px !important;
  }
}

@media (min-width: 992px) {
  .elementor-default .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 950px !important;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .elementor-default .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1160px !important;
  }
}

@media only screen and (min-width: 1401px) {
  .elementor-default .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1180px !important;
  }
}

@media (min-width: 1680px) {
  .elementor-default .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1580px !important;
  }
}

/* -----------------------------------------------
   14. ELEMENTOS NO SELECCIONABLES
   ----------------------------------------------- */
.elementor *,
.elementor :after,
.elementor :before {
  user-select: none;
  box-sizing: border-box;
}

/* -----------------------------------------------
   15. CONTAINER GENERAL
   ----------------------------------------------- */
.container {
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 0px;
  margin-right: 0px;
}

/* -----------------------------------------------
   16. FONDO DEL BODY
   ----------------------------------------------- */
body.custom-background {
  background-color: #ffffff;
}

/* -----------------------------------------------
   16.1 TAMAÑO BASE DE FUENTE
   ----------------------------------------------- */
html {
  font-size: 17px;
}

/* -----------------------------------------------
   17. SCROLL UP
   ----------------------------------------------- */
#scroll-up {
  bottom: 80px;
}

/* -----------------------------------------------
   18. LOADER (LoftLoader)
   ----------------------------------------------- */
#loftloader-wrapper .loader-section {
  background: #000000;
  opacity: 1;
}

#loftloader-wrapper.pl-imgloading #loader {
  width: 76px;
}

/* === RESPONSIVE TABLET (max-width: 992px) === */
@media (max-width: 992px) {
  .elementor-heading-title.elementor-size-default { font-size: 32px !important; }
  .elementor-widget-text-editor .elementor-widget-container { font-size: 18px !important; }
  .entry-content-wrap { font-size: 17px !important; }
  .site-branding .site-title { font-size: 40px !important; }
  .slider-figcaption .slide-title { font-size: 28px !important; }
}

/* === RESPONSIVE MÓVIL (max-width: 576px) === */
@media (max-width: 576px) {
  .elementor-heading-title.elementor-size-default { font-size: 20px !important; }
  .elementor-widget-text-editor .elementor-widget-container { font-size: 16px !important; }
  .entry-content-wrap { font-size: 16px !important; }
  .site-branding .site-title { font-size: 32px !important; }
  .slider-figcaption .slide-title { font-size: 22px !important; }
}
/* === FIN RESPONSIVE === */